<template>
  <div>
    <div class="row"></div>
    <div class="row">
      <q-btn @click="focusHelper.focusFirst()" color="primary">聚焦第一个input</q-btn>
    </div>
    <div class="row q-col-gutter-sm q-pt-sm">
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <span>组件字段1</span>
        <q-input :hide-bottom-space="true" dense outlined square stack-label v-model="field1" readonly
          autofocus :ref="el=>focusHelper.regRef(el, 1)" @keyup.enter="focusHelper.onEntered(1)"></q-input>
      </div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <span>组件字段2</span>
        <q-input :hide-bottom-space="true" dense outlined square stack-label v-model="field2"
          :ref="el=>focusHelper.regRef(el, 2)" @keyup.enter="focusHelper.onEntered(2)">
        </q-input>
      </div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <span>组件字段3</span>
        <simple-filter-select :options="optionsList" v-model="field3" :allow-raw-text="true"
          :input-debounce="0" :ref="el=>focusHelper.regRef(el, 3)" @keyup.enter="focusHelper.onEntered(3)" />
      </div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <span>组件字段4</span>
        <q-input :hide-bottom-space="true" dense outlined square stack-label v-model="field4"
          :ref="el=>focusHelper.regRef(el, 4)" @keyup.enter="focusHelper.onEntered(4)">
        </q-input>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts">
export default {
  name: 'focusNextTestComponent'
}
</script>

<script lang="ts" setup>

import {ref} from 'vue'
import {useFocusNextHelper} from '../lib/hooks/focusHelper'

const optionsList = ['Google', 'Facebook', 'Twitter', 'Apple', 'Oracle', 'Alibaba', 'Tencent', 'PDD']
const field1 = ref('111')
const field2 = ref('222')
const field3 = ref('')
const field4 = ref('')

const emit = defineEmits<{
  (e: 'on-last-entered'): void
}>()

const focusHelper = useFocusNextHelper(() => {
  emit('on-last-entered')
})

//我一开始叫focusFirst，死活不行，说找不到方法，后来改成别的名字可以了，花了很多时间，关键是因为这个问题网上无人反映
const focusAtFirstInput = ()=>focusHelper.focusFirst()

defineExpose({
  focusAtFirstInput
})

</script>
